<template>
<div class="flex-parent">
  <div class="wrapper">
    <div class="promo-container">
		<div class="promo-item">
      <h2>社区服务</h2></div>
	</div>
    <div  
      v-for="(item, index) in items1"  
      :key="index"  
      class="grid-content ep-bg-purple"
      @click="handleItemClick(item.link)">  
      <div class="image-container">  
        <el-image  
          class="image"  
          :src="item.src"  
          :fit="item.fit"
          />  
      <div class="image-text">{{ item.text }}</div>  
      </div>  
    </div>
	<div class="promo-container" style="margin-top: 80px;">
		<div class="promo-item">
      <h2>促销商品</h2></div>
  	</div>
  	<div
      v-for="(item, index) in first12Goods"  
      :key="index"  
      class="grid-content-product ep-bg-purple"
      @click="gotoGoods(item.id)">  
      <div class="image-container">  
	    <el-image  
	      class="productImg"  
	      :src=" Path.imgPath + item.imgs"  
	      :fit="item.fit"
        />
	    <div class="product-image-text">
        <div style="font-size: 13px;"> {{ item.description }} </div>  
        <div style="color: red;font-size: 15px;margin-top: 1%;">秒杀价:{{ (item.price - item.discount).toFixed(2) }}</div>
      </div>  
	  </div>  
	</div>
  </div>
</div>
</template>  
  
<script setup>  
import { ElImage, ElDialog,ElContainer,ElMessage,ElMessageBox } from 'element-plus';
import { ref, computed,reactive, watch} from 'vue';
import { useRouter } from 'vue-router';
import { Path } from "@/constant/index"
import { get } from "@/plugins/axios"
const router = useRouter();
const address = ref([])
const items1 = ref([
  { src: '/images/menu_picture/访客登记.png', fit: 'fill', text: '访客登记',link: Path.communityPath+"/visitors" },  
  { src: '/images/menu_picture/报事维修.png', fit: 'fill', text: '报事维修',link: Path.communityPath+'/repair' },    
  { src: '/images//menu_picture/投诉建议.png', fit: 'fill', text: '投诉建议',link: Path.communityPath+'/complaints' },  
  { src: '/images//menu_picture/物业缴费.png', fit: 'fill', text: '物业缴费',link: Path.communityPath+'/payment' },  
  { src: '/images/menu_picture/车位绑定.png', fit: 'fill', text: '车位绑定',link: Path.communityPath+'/parking' },  
  { src: '/images/menu_picture/公告查看.png', fit: 'fill', text: '公告查看',link: Path.communityPath+'/notice' },  
  ]);
   
function handleItemClick(link) {  
  router.push(link);    
}
//跳转相应商品位置
const gotoGoods = (id)=>{
    router.replace({name:'Store',query:{goodsID:id}})
}


const goods = ref([])
getGoods()
function getGoods(){
  get(Path.goodsLowPrice,null ,content => {
    goods.value = content
  })
}


const first12Goods = computed(() => {  
  return goods.value.slice(0, 12);  
  });   

</script> 
  
<style scoped lang="scss">  
.image-container {  
  display: flex;  
  flex-direction: column; // 使子元素垂直排列  
  align-items: center; // 水平居中  
  text-align: center; // 确保文本在容器中水平居中  
  background-color: #ffffff;
}  

  
.image {  
  width: 60px;  
  height: 48px;  
  margin-bottom: 10px; // 在图像和文本之间添加一些间距  
  border-radius: 4px;
}  
.productImg{
	width: 260px;
	height: 270px;
	margin-bottom: 10px;
	border-radius: 4px;
}  
.image-text {  
  // 你可以在这里添加一些样式来美化文本  
  color: #333; // 文本颜色  
  font-size: 14px; // 文本字体大小  
}  
.product-image-text{  
  // 你可以在这里添加一些样式来美化文本  
  color: #333; // 文本颜色  
  font-size: 10px; // 文本字体大小  
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}  
  
.wrapper {  
  display: flex;  
  flex-wrap: wrap; // 允许子元素换行  
  justify-content: space-between;
  gap: 10px;
}  
  
.grid-content {  
  border-radius: 4px;  
  min-height: 95px; // 根据需要调整  
  width: calc(16.666% - 10px);  
  background-color: #ffffff; // 或你想要的任何颜色  
  display: flex;  
  flex-direction: column; // 如果你想让图像和文本垂直排列（这在这个例子中已经是默认的）  
  align-items: center; // 水平居中（如果你想要的话）  
  justify-content: flex-start; // 从上到下排列子元素  
  padding: 10px; // 为内容添加一些内边距（可选）  
  margin-left: 0px;
}  

.grid-content-product {  
  border-radius: 4px;  
  min-height: 192px; // 根据需要调整  
  width: calc(25% - 10px);  
  background-color: #ffffff; // 或你想要的任何颜色  
  display: flex;  
  flex-direction: column; // 如果你想让图像和文本垂直排列（这在这个例子中已经是默认的）  
  align-items: center; // 水平居中（如果你想要的话）  
  justify-content: flex-start; // 从上到下排列子元素  
  padding: 10px; // 为内容添加一些内边距（可选）  
  margin-left: 0px;
}  
  
.flex-parent { 
display: flex;  
justify-content: center; /* 水平居中 */  
align-items: center; /* 如果需要垂直居中 */  
// height: 100vh; /* 假设父容器占满视口高度 */  
width: 100%; /* 父容器宽度 */  
max-width: 1200px;
margin: 0 auto;
padding: 20px;
flex-wrap: wrap;

}

.grid-content:hover {  
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
  .image {  
    // 使用transform放大图片  
    transform: scale(1.1); // 根据需要调整放大比例  
    transition: transform 0.3s ease; // 添加过渡效果  
  }  
  .productImg{
    transform: scale(1.1); // 根据需要调整放大比例  
    transition: transform 0.3s ease; // 添加过渡效果 
  }
  .image-text {  
    // 放大文字并加深颜色  
    // font-size: 16px; // 根据需要调整字体大小  
    color: #000; // 加深文字颜色
    font-weight: 800; 
    transition: font-size 0.3s ease, color 0.3s ease; // 添加过渡效果  
  }
  .product-image-text{
    // 你可以在这里添加一些样式来美化文本  
    color: #000; // 文本颜色 
    font-weight: 800;  
    // font-size: 12px; // 文本字体大小  

	transition: font-size 0.3s ease, color 0.3s ease; // 添加过渡效果 
  }   
}

.image-container:hover {  
  .image {  
    // 使用transform放大图片  
    transform: scale(1.1); // 根据需要调整放大比例  
    transition: transform 0.3s ease; // 添加过渡效果  
  }  
  .productImg{
    transform: scale(1.1); // 根据需要调整放大比例  
    transition: transform 0.3s ease; // 添加过渡效果 
  }
  .image-text {  
    // 放大文字并加深颜色  
    // font-size: 16px; // 根据需要调整字体大小  
    color: #000; // 加深文字颜色
    font-weight: 800; 
    transition: font-size 0.3s ease, color 0.3s ease; // 添加过渡效果  
  }
  .product-image-text{
    // 你可以在这里添加一些样式来美化文本  
    color: #000; // 文本颜色 
    font-weight: 800;  
    // font-size: 12px; // 文本字体大小  

	transition: font-size 0.3s ease, color 0.3s ease; // 添加过渡效果 
  }   
}



.promo-container {  
  // 根据需要设置宽度、高度、边距等  
  width: 100%; // 或者根据需求设置其他宽度  
  text-align: center; // 确保文本居中  
  padding: 20px 0; // 上下内边距，根据需要调整  
  // 如果需要，还可以添加边框、背景色等样式  
}  

//输入框样式
.input {
    height: 36px;
    width: 75%;
    border-radius: 4px;
  }
  

::v-deep .el-popover{
  min-width:500px;
}

</style>